<template>
  <div class="knowledge-admin-container">
    <!-- 顶部导航 -->
    <div class="top-navigation">
      <div class="nav-content">
        <div class="nav-left">
          <div class="nav-icon">
            <el-icon size="32" color="#fff"><Star /></el-icon>
          </div>
          <div class="nav-text">
            <h1>知识图谱管理中心</h1>
            <p>构建智能化的学习生态系统</p>
          </div>
          <el-tag type="success" effect="light" class="admin-tag">
            🔒 管理员权限
          </el-tag>
        </div>
        <div class="nav-right">
          <el-button circle :icon="Download" class="nav-btn" />
          <el-button circle :icon="Upload" class="nav-btn" />
          <el-button circle :icon="Setting" class="nav-btn" />
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 标签页导航 */-->
      <div class="tab-navigation">
        <div class="tab-container">
          <div class="tab-wrapper">
            <div 
              v-for="tab in tabs" 
              :key="tab.id"
              :class="['tab-item', { active: activeTab === tab.id }]"
              @click="activeTab = tab.id"
            >
              <component :is="tab.icon" class="tab-icon" />
              <span>{{ tab.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <!-- 总览页面 -->
        <div v-if="activeTab === 'overview'" class="overview-content">
          <!-- 欢迎区域 -->
          <div class="welcome-banner">
            <div class="banner-overlay"></div>
            <div class="banner-decoration">
              <el-icon size="96"><Star /></el-icon>
            </div>
            <div class="banner-content">
              <h1>欢迎回来，管理员 ✨</h1>
              <p>今天有 <span class="highlight">23</span> 名新学习者加入了您的知识图谱</p>
            </div>
          </div>

          <!-- 统计卡片 -->
          <div class="stats-grid">
            <el-card 
              v-for="(stat, index) in statistics" 
              :key="index"
              class="stat-card"
              :class="`stat-card-${index}`"
              shadow="hover"
            >
              <div class="stat-content">
                <div class="stat-icon" :class="`stat-icon-${index}`">
                  <component :is="stat.icon" />
                </div>
                <div class="stat-info">
                  <p class="stat-title">{{ stat.title }}</p>
                  <p class="stat-value">{{ stat.value }}</p>
                </div>
              </div>
              <div class="stat-footer">
                <span class="stat-change" :class="`stat-change-${index}`">{{ stat.change }}</span>
                <el-icon class="trend-icon"><TrendUp /></el-icon>
              </div>
            </el-card>
          </div>

          <!-- 技术方向概览 -->
          <el-card class="tech-overview" shadow="hover">
            <template #header>
              <div class="card-header">
                <div>
                  <h3>技术方向概览</h3>
                  <p>各技术方向的知识点分布和增长情况</p>
                </div>
                <el-icon size="32" color="#8B5CF6"><Globe /></el-icon>
              </div>
            </template>
            
            <div class="tech-grid">
              <div 
                v-for="category in categories" 
                :key="category.id"
                class="tech-card"
                :style="{ background: category.gradient }"
                @click="selectCategory(category.key)"
              >
                <div class="tech-bg-icon">
                  <span>{{ category.icon }}</span>
                </div>
                
                <div class="tech-main">
                  <div class="tech-header">
                    <span class="tech-icon">{{ category.icon }}</span>
                    <div class="tech-info">
                      <h4>{{ category.name }}</h4>
                      <p>{{ category.nodeCount }} 个知识点</p>
                    </div>
                  </div>

                  <div class="tech-progress">
                    <div class="progress-text">
                      <span>完成度</span>
                      <span>{{ Math.round((category.nodeCount / 20) * 100) }}%</span>
                    </div>
                    <el-progress 
                      :percentage="Math.round((category.nodeCount / 20) * 100)" 
                      :show-text="false"
                      stroke-width="12"
                      color="#ffffff"
                    />
                    <div class="growth-tag">
                      {{ category.growth }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 最新活动 -->
          <el-card class="activity-overview" shadow="hover">
            <template #header>
              <h3>最新活动动态</h3>
            </template>
            
            <div class="activity-list">
              <div 
                v-for="(activity, index) in activities" 
                :key="index" 
                class="activity-item"
              >
                <div class="activity-icon" :class="`activity-icon-${index}`">
                  <component :is="activity.icon" />
                </div>
                <div class="activity-content">
                  <p class="activity-title">{{ activity.text }}</p>
                  <div class="activity-meta">
                    <span>{{ activity.time }}</span>
                    <span>•</span>
                    <el-tag size="small" type="info">{{ activity.category }}</el-tag>
                  </div>
                </div>
                <el-icon class="activity-arrow"><ArrowRight /></el-icon>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 知识点管理页面 -->
        <div v-if="activeTab === 'nodes'" class="nodes-content">
          <el-card class="nodes-container" shadow="hover">
            <template #header>
              <div class="card-header">
                <div>
                  <h3>知识森林视图</h3>
                  <p>以树形结构展示知识点之间的层级关系</p>
                </div>
                <el-icon size="32" color="#10B981"><Connection /></el-icon>
              </div>
            </template>

            <!-- 操作栏 -->
            <div class="nodes-operations">
              <el-input
                v-model="searchTerm"
                placeholder="搜索知识点..."
                class="search-input"
                size="large"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              
              <el-select 
                v-model="selectedCategory" 
                placeholder="所有分类"
                class="filter-select"
                size="large"
              >
                <el-option label="所有分类" value="all" />
                <el-option 
                  v-for="category in categories" 
                  :key="category.id" 
                  :label="category.name" 
                  :value="category.key"
                />
              </el-select>

              <el-select 
                v-model="selectedDifficulty" 
                placeholder="难度筛选"
                class="filter-select"
                size="large"
              >
                <el-option label="所有难度" value="all" />
                <el-option label="⭐ 初级" value="1" />
                <el-option label="⭐⭐ 中级" value="2" />
                <el-option label="⭐⭐⭐ 高级" value="3" />
                <el-option label="⭐⭐⭐⭐ 专家" value="4" />
                <el-option label="⭐⭐⭐⭐⭐ 大师" value="5" />
              </el-select>
              
              <el-button 
                type="primary" 
                @click="openModal('node')"
                size="large"
                class="add-btn"
              >
                <el-icon><Plus /></el-icon>
                <span>新增知识点</span>
              </el-button>
            </div>

            <!-- 节点网格 -->
            <div class="nodes-grid">
              <el-card 
                v-for="node in filteredNodes" 
                :key="node.id"
                class="node-card"
                :class="{ 'node-card-hover': hoveredNode === node.id }"
                @mouseenter="hoveredNode = node.id"
                @mouseleave="hoveredNode = null"
                shadow="hover"
              >
                <div class="node-content">
                  <div class="node-header">
                    <div class="node-icon" :style="{ background: getDifficultyGradient(node.difficulty) }">
                      <span class="node-icon-text">{{ getTypeIcon(node.type) }}</span>
                    </div>
                    
                    <div class="node-actions">
                      <el-button circle size="small" @click="editNode(node)">
                        <el-icon><Edit /></el-icon>
                      </el-button>
                      <el-button circle size="small" @click="shareNode(node)">
                        <el-icon><Share /></el-icon>
                      </el-button>
                      <el-button circle size="small" type="danger" @click="deleteNode(node)">
                        <el-icon><Delete /></el-icon>
                      </el-button>
                    </div>
                  </div>
                  
                  <div class="node-info">
                    <h4 class="node-title">{{ node.name }}</h4>
                    
                    <div class="node-tags">
                      <el-tag size="small" :type="getTagType(node.type)" effect="plain">
                        {{ getTypeLabel(node.type) }}
                      </el-tag>
                      <el-tag size="small" type="warning" effect="plain">
                        {{ '⭐'.repeat(node.difficulty) }}
                      </el-tag>
                      <el-tag size="small" type="info" effect="plain">
                        {{ node.category }}
                      </el-tag>
                    </div>
                    
                    <p v-if="node.description" class="node-description">
                      {{ node.description }}
                    </p>

                    <div class="node-stats">
                      <div class="node-stat">
                        <el-icon><User /></el-icon>
                        <span>{{ node.learners }}</span>
                      </div>
                      <div class="node-stat">
                        <el-icon><Connection /></el-icon>
                        <span>{{ node.connections }}</span>
                      </div>
                      <div class="node-stat">
                        <el-icon><View /></el-icon>
                        <span>{{ node.views || 0 }}</span>
                      </div>
                    </div>
                  </div>
                  
                  <div class="node-progress">
                    <div class="progress-info">
                      <span>学习热度</span>
                      <span>{{ Math.min(Math.round((node.learners / 300) * 100), 100) }}%</span>
                    </div>
                    <el-progress 
                      :percentage="Math.min(Math.round((node.learners / 300) * 100), 100)" 
                      :color="getDifficultyColor(node.difficulty)"
                      :show-text="false"
                      stroke-width="8"
                    />
                  </div>

                  <div class="node-footer">
                    <div class="node-meta">
                      <span class="create-time">创建于: {{ formatDate(node.createTime) }}</span>
                      <span class="update-time">更新于: {{ formatDate(node.updateTime) }}</span>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>

            <!-- 空状态 -->
            <el-empty v-if="filteredNodes.length === 0" description="暂无知识点数据">
              <el-button type="primary" @click="openModal('node')">
                创建第一个知识点
              </el-button>
            </el-empty>

            <!-- 分页 -->
            <div v-if="filteredNodes.length > 0" class="pagination-container">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[12, 24, 36, 48]"
                :total="filteredNodes.length"
                layout="total, sizes, prev, pager, next, jumper"
                background
              />
            </div>
          </el-card>
        </div>

        <!-- 关系管理页面 -->
        <div v-if="activeTab === 'relations'" class="relations-content">
          <el-card class="relations-container" shadow="hover">
            <template #header>
              <div class="card-header">
                <div>
                  <h3>知识关系网络</h3>
                  <p>可视化知识点之间的依赖关系</p>
                </div>
                <el-button 
                  type="primary" 
                  @click="openModal('relation')"
                  class="add-relation-btn"
                >
                  <el-icon><Share /></el-icon>
                  <span>新增关系</span>
                </el-button>
              </div>
            </template>

            <div class="relations-grid">
              <el-card 
                v-for="relation in relations" 
                :key="relation.id"
                class="relation-card"
                shadow="hover"
              >
                <div class="relation-content">
                  <!-- 源节点 -->
                  <div class="relation-node source-node">
                    <div class="node-name">{{ relation.source }}</div>
                    <div class="node-type">源节点</div>
                  </div>

                  <!-- 关系连接 -->
                  <div class="relation-connection">
                    <div class="connection-line" :class="`connection-${relation.type}`"></div>
                    <div class="relation-label">
                      <span :class="`label-${relation.type}`">
                        {{ getRelationLabel(relation.type) }}
                      </span>
                      <span class="strength-text">
                        强度: {{ getStrengthLabel(relation.strength) }}
                      </span>
                    </div>
                    <div class="connection-arrow" :class="`arrow-${relation.type}`"></div>
                  </div>

                  <!-- 目标节点 -->
                  <div class="relation-node target-node">
                    <div class="node-name">{{ relation.target }}</div>
                    <div class="node-type">目标节点</div>
                  </div>

                  <!-- 操作按钮 -->
                  <div class="relation-actions">
                    <el-button circle size="small" @click="editRelation(relation)">
                      <el-icon><Edit /></el-icon>
                    </el-button>
                    <el-button circle size="small" type="danger" @click="deleteRelation(relation)">
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </el-card>
        </div>

        <!-- 学习路径页面 -->
        <div v-if="activeTab === 'paths'" class="paths-content">
          <el-card class="paths-container" shadow="hover">
            <template #header>
              <div class="card-header">
                <div>
                  <h3>学习路径管理</h3>
                  <p>创建和管理结构化的学习路径</p>
                </div>
                <el-button type="primary" @click="openModal('path')">
                  <el-icon><Reading /></el-icon>
                  <span>创建路径</span>
                </el-button>
              </div>
            </template>

            <div class="paths-list">
              <el-card 
                v-for="path in learningPaths" 
                :key="path.id"
                class="path-card"
                shadow="hover"
              >
                <div class="path-content">
                  <div class="path-header">
                    <div class="path-icon">
                      <el-icon><Reading /></el-icon>
                    </div>
                    <div class="path-info">
                      <div class="path-title-row">
                        <h3 class="path-title">{{ path.name }}</h3>
                        <el-tag v-if="path.trending" type="warning" effect="dark" class="trending-tag">
                          <el-icon><Lightning /></el-icon>
                          <span>热门</span>
                        </el-tag>
                        <div class="path-rating">
                          <el-icon color="#F59E0B"><Star /></el-icon>
                          <span>{{ path.rating }}</span>
                        </div>
                      </div>
                      
                      <div class="path-tags">
                        <el-tag 
                          :type="getDifficultyTagType(path.difficulty)" 
                          effect="plain"
                        >
                          {{ getDifficultyLabel(path.difficulty) }}
                        </el-tag>
                        <el-tag 
                          :type="getPathTypeTagType(path.type)" 
                          effect="plain"
                        >
                          {{ getPathTypeLabel(path.type) }}
                        </el-tag>
                      </div>
                    </div>
                    
                    <div class="path-actions">
                      <el-button 
                        circle 
                        @click="togglePathExpansion(path.id)"
                        :icon="expandedPaths.has(path.id) ? ArrowDown : ArrowRight"
                      />
                      <el-button circle :icon="Edit" @click="editPath(path)" />
                      <el-button circle type="danger" :icon="Delete" @click="deletePath(path)" />
                    </div>
                  </div>
                  
                  <div class="path-stats">
                    <div class="stat-item">
                      <el-icon><Collection /></el-icon>
                      <span>{{ path.nodeCount }} 个节点</span>
                    </div>
                    <div class="stat-item">
                      <el-icon><Clock /></el-icon>
                      <span>{{ path.estimatedTime }}</span>
                    </div>
                    <div class="stat-item">
                      <el-icon><User /></el-icon>
                      <span>{{ path.learners }} 学习者</span>
                    </div>
                    <div class="stat-item">
                      <el-icon><DataAnalysis /></el-icon>
                      <span>{{ path.completion }}% 完成率</span>
                    </div>
                  </div>

                  <div class="path-progress">
                    <div class="progress-info">
                      <span>整体完成进度</span>
                      <span>{{ path.completion }}%</span>
                    </div>
                    <el-progress 
                      :percentage="path.completion" 
                      :color="getPathProgressColor(path.completion)"
                      stroke-width="12"
                    />
                  </div>

                  <!-- 展开的节点序列 -->
                  <el-collapse-transition>
                    <div v-if="expandedPaths.has(path.id)" class="path-nodes">
                      <h4 class="nodes-title">
                        <el-icon><Share /></el-icon>
                        <span>路径节点序列</span>
                      </h4>
                      <div class="nodes-sequence">
                        <div 
                          v-for="(node, index) in path.nodes" 
                          :key="index" 
                          class="sequence-item"
                        >
                          <div class="sequence-node">
                            <div class="node-number">{{ index + 1 }}</div>
                            <div class="node-name">{{ node }}</div>
                          </div>
                          <div v-if="index < path.nodes.length - 1" class="sequence-arrow">
                            <el-icon><ArrowRight /></el-icon>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-collapse-transition>
                </div>
              </el-card>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <el-dialog 
      v-model="showAddModal" 
      :title="modalTitle"
      width="800px"
      class="custom-dialog"
    >
      <div v-if="modalType === 'node'" class="modal-content">
        <el-form :model="nodeForm" label-width="120px" class="node-form">
          <div class="form-row">
            <el-form-item label="节点名称">
              <el-input v-model="nodeForm.name" placeholder="例如：React Hooks" />
            </el-form-item>
            <el-form-item label="节点标识">
              <el-input v-model="nodeForm.key" placeholder="例如：react-hooks" />
            </el-form-item>
          </div>
          
          <div class="form-row">
            <el-form-item label="节点类型">
              <el-select v-model="nodeForm.type" placeholder="选择节点类型">
                <el-option label="🏗️ 基础知识" value="foundation" />
                <el-option label="📦 框架" value="framework" />
                <el-option label="💡 概念" value="concept" />
                <el-option label="🔧 工具" value="tool" />
              </el-select>
            </el-form-item>
            <el-form-item label="难度等级">
              <el-select v-model="nodeForm.difficulty" placeholder="选择难度">
                <el-option 
                  v-for="level in [1,2,3,4,5]" 
                  :key="level" 
                  :label="`${'⭐'.repeat(level)} ${level}星`" 
                  :value="level" 
                />
              </el-select>
            </el-form-item>
            <el-form-item label="技术分类">
              <el-select v-model="nodeForm.category" placeholder="选择分类">
                <el-option 
                  v-for="cat in categories" 
                  :key="cat.id" 
                  :label="`${cat.icon} ${cat.name}`" 
                  :value="cat.key" 
                />
              </el-select>
            </el-form-item>
          </div>
          
          <el-form-item label="描述">
            <el-input 
              v-model="nodeForm.description" 
              type="textarea" 
              :rows="4"
              placeholder="描述这个知识点的内容、学习目标和应用场景..."
            />
          </el-form-item>
        </el-form>
      </div>
      
      <div v-if="modalType === 'relation'" class="modal-content">
        <el-form :model="relationForm" label-width="120px">
          <div class="form-row">
            <el-form-item label="源节点">
              <el-select v-model="relationForm.source" placeholder="选择源节点">
                <el-option 
                  v-for="node in allNodes" 
                  :key="node.id" 
                  :label="node.name" 
                  :value="node.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="目标节点">
              <el-select v-model="relationForm.target" placeholder="选择目标节点">
                <el-option 
                  v-for="node in allNodes" 
                  :key="node.id" 
                  :label="node.name" 
                  :value="node.name"
                />
              </el-select>
            </el-form-item>
          </div>
          
          <el-form-item label="关系类型">
            <el-radio-group v-model="relationForm.type" class="relation-types">
              <div class="relation-option">
                <el-radio value="prerequisite">
                  <div class="option-content">
                    <div class="option-icon prerequisite">→</div>
                    <span>前置条件</span>
                  </div>
                </el-radio>
              </div>
              <div class="relation-option">
                <el-radio value="related">
                  <div class="option-content">
                    <div class="option-icon related">↔</div>
                    <span>相关知识</span>
                  </div>
                </el-radio>
              </div>
              <div class="relation-option">
                <el-radio value="extends">
                  <div class="option-content">
                    <div class="option-icon extends">↗</div>
                    <span>扩展知识</span>
                  </div>
                </el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
          
          <div class="form-row">
            <el-form-item label="关系强度">
              <el-slider 
                v-model="relationForm.strength" 
                :min="1" 
                :max="5" 
                :marks="{ 1: '弱', 3: '中等', 5: '强' }"
                show-stops
              />
            </el-form-item>
          </div>
          
          <el-form-item label="关系标签">
            <el-input 
              v-model="relationForm.label" 
              placeholder="可选：为关系添加描述性标签"
            />
          </el-form-item>
        </el-form>
      </div>

      <div v-if="modalType === 'path'" class="modal-content">
        <el-form :model="pathForm" label-width="120px">
          <div class="form-row">
            <el-form-item label="路径名称">
              <el-input 
                v-model="pathForm.name" 
                placeholder="例如：React 全栈开发路径"
              />
            </el-form-item>
            <el-form-item label="预计时长">
              <el-input 
                v-model="pathForm.estimatedTime" 
                placeholder="例如：3-6个月"
              />
            </el-form-item>
          </div>
          
          <div class="form-row">
            <el-form-item label="技术方向">
              <el-select v-model="pathForm.category" placeholder="选择方向">
                <el-option 
                  v-for="cat in categories" 
                  :key="cat.id" 
                  :label="`${cat.icon} ${cat.name}`" 
                  :value="cat.key" 
                />
              </el-select>
            </el-form-item>
            <el-form-item label="难度级别">
              <el-select v-model="pathForm.difficulty" placeholder="选择难度">
                <el-option label="🌱 初级" value="beginner" />
                <el-option label="🌿 中级" value="intermediate" />
                <el-option label="🌳 高级" value="advanced" />
              </el-select>
            </el-form-item>
          </div>
          
          <el-form-item label="路径描述">
            <el-input 
              v-model="pathForm.description" 
              type="textarea" 
              :rows="3"
              placeholder="描述这个学习路径的目标、适合的学习者类型以及预期收获..."
            />
          </el-form-item>
          
          <el-form-item label="节点序列构建">
            <div class="path-builder">
              <div class="builder-header">
                <el-icon><Share /></el-icon>
                <span>拖拽排序知识点，构建学习路径</span>
              </div>
              
              <div class="node-sequence">
                <div 
                  v-for="(node, index) in pathForm.nodes" 
                  :key="index" 
                  class="sequence-node-item"
                >
                  <div class="node-index">{{ index + 1 }}</div>
                  <div class="node-icon">
                    {{ getTypeIcon(allNodes.find(n => n.name === node)?.type || 'concept') }}
                  </div>
                  <span class="node-name">{{ node }}</span>
                  <el-tag size="small">
                    {{ '⭐'.repeat(allNodes.find(n => n.name === node)?.difficulty || 1) }}
                  </el-tag>
                  <el-button 
                    circle 
                    size="small" 
                    type="danger" 
                    :icon="Delete"
                    @click="removeNodeFromPath(index)"
                  />
                </div>
              </div>
              
              <el-button 
                class="add-node-btn"
                @click="showNodeSelector = true"
              >
                <el-icon><Plus /></el-icon>
                <span>添加知识点</span>
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showAddModal = false">取消</el-button>
          <el-button type="primary" @click="saveModal">保存创建</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 浮动操作按钮 -->
    <div class="floating-actions">
      <el-button 
        circle 
        type="primary" 
        @click="openModal('node')"
        class="float-btn"
        title="快速添加知识点"
      >
        <el-icon><Plus /></el-icon>
      </el-button>
      <el-button 
        circle 
        type="success" 
        @click="openModal('relation')"
        class="float-btn"
        title="快速添加关系"
      >
        <el-icon><Share /></el-icon>
      </el-button>
      <el-button 
        circle 
        type="warning" 
        @click="openModal('path')"
        class="float-btn"
        title="快速创建路径"
      >
        <el-icon><Reading /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
   Download, Upload, Setting, Star,Tickets,
  Search, Plus, Edit, Delete, Share, Connection, User, View,
  ArrowRight, ArrowDown, Reading, Lightning, Collection,
  Clock, DataAnalysis
} from '@element-plus/icons-vue'

// 响应式数据
const activeTab = ref('overview')
const searchTerm = ref('')
const selectedCategory = ref('all')
const selectedDifficulty = ref('all')
const showAddModal = ref(false)
const modalType = ref('')
const hoveredNode = ref(null)
const currentPage = ref(1)
const pageSize = ref(12)
const expandedPaths = ref(new Set())
const showNodeSelector = ref(false)

// 表单数据
const nodeForm = ref({
  name: '',
  key: '',
  type: '',
  difficulty: 1,
  category: '',
  description: ''
})

const relationForm = ref({
  source: '',
  target: '',
  type: '',
  strength: 3,
  label: ''
})

const pathForm = ref({
  name: '',
  estimatedTime: '',
  category: '',
  difficulty: '',
  description: '',
  nodes: []
})

// 标签页配置
const tabs = [
  { id: 'overview', name: '总览仪表板', icon: Star },
  { id: 'nodes', name: '知识点管理', icon: Tickets },
  { id: 'relations', name: '关系管理', icon: Share },
  { id: 'paths', name: '学习路径', icon: Reading }
]

// 统计数据
const statistics = ref([
  { title: '总知识点', value: '45', change: '+5', icon: Tickets },
  { title: '学习路径', value: '12', change: '3 推荐', icon: Reading },
  { title: '活跃学习者', value: '833', change: '+12%', icon: User },
  { title: '平均完成率', value: '72%', change: '需优化', icon: DataAnalysis }
])

// 分类数据
const categories = ref([
  { 
    id: 1, 
    key: 'frontend', 
    name: '前端开发', 
    icon: '🎨', 
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    nodeCount: 15, 
    growth: '+12%' 
  },
  { 
    id: 2, 
    key: 'backend', 
    name: '后端开发', 
    icon: '⚙️', 
    gradient: 'linear-gradient(135deg, #764ba2 0%, #f093fb 100%)',
    nodeCount: 12, 
    growth: '+8%' 
  },
  { 
    id: 3, 
    key: 'database', 
    name: '数据库', 
    icon: '🗄️', 
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    nodeCount: 8, 
    growth: '+15%' 
  },
  { 
    id: 4, 
    key: 'devops', 
    name: 'DevOps', 
    icon: '🚀', 
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    nodeCount: 10, 
    growth: '+20%' 
  },
  { 
    id: 5, 
    key: 'ai', 
    name: '人工智能', 
    icon: '🤖', 
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    nodeCount: 14, 
    growth: '+35%' 
  },
  { 
    id: 6, 
    key: 'mobile', 
    name: '移动开发', 
    icon: '📱', 
    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    nodeCount: 9, 
    growth: '+18%' 
  }
])

// 活动数据
const activities = ref([
  { icon: Plus, text: '新增知识点: Vue.js 组件开发', time: '2小时前', category: '前端开发' },
  { icon: Share, text: '更新关系: JavaScript → TypeScript', time: '5小时前', category: '前端开发' },
  { icon: Reading, text: '新建路径: 微服务架构入门', time: '1天前', category: '后端开发' },
  { icon: Star, text: '路径完成: 前端开发入门 (张三)', time: '2天前', category: '学习记录' }
])

// 知识节点数据
const knowledgeNodes = ref([
  {
    id: 1,
    name: 'Web开发基础',
    type: 'foundation',
    difficulty: 1,
    category: 'frontend',
    connections: 0,
    learners: 320,
    views: 1250,
    description: 'Web开发的基础知识，包括HTML、CSS和JavaScript的基本概念',
    createTime: '2024-01-15',
    updateTime: '2024-09-15'
  },
  {
    id: 2,
    name: 'HTML结构',
    type: 'foundation',
    difficulty: 1,
    category: 'frontend',
    connections: 2,
    learners: 280,
    views: 980,
    description: 'HTML标记语言的基础结构和语义化标签',
    createTime: '2024-01-20',
    updateTime: '2024-09-10'
  },
  {
    id: 3,
    name: 'CSS样式',
    type: 'foundation',
    difficulty: 2,
    category: 'frontend',
    connections: 4,
    learners: 245,
    views: 856,
    description: 'CSS样式表的基础语法和布局技术',
    createTime: '2024-02-01',
    updateTime: '2024-09-12'
  },
  {
    id: 4,
    name: 'JavaScript编程',
    type: 'concept',
    difficulty: 3,
    category: 'frontend',
    connections: 8,
    learners: 298,
    views: 1450,
    description: 'JavaScript编程语言的核心概念和ES6+新特性',
    createTime: '2024-02-15',
    updateTime: '2024-09-14'
  },
  {
    id: 5,
    name: 'React框架',
    type: 'framework',
    difficulty: 4,
    category: 'frontend',
    connections: 7,
    learners: 156,
    views: 678,
    description: 'React前端框架的组件化开发和状态管理',
    createTime: '2024-03-01',
    updateTime: '2024-09-13'
  },
  {
    id: 6,
    name: 'Vue.js框架',
    type: 'framework',
    difficulty: 4,
    category: 'frontend',
    connections: 5,
    learners: 143,
    views: 567,
    description: 'Vue.js框架的响应式数据绑定和组件系统',
    createTime: '2024-03-10',
    updateTime: '2024-09-11'
  }
])

// 关系数据
const relations = ref([
  { id: 1, source: 'HTML结构', target: 'CSS样式', type: 'prerequisite', strength: 'strong' },
  { id: 2, source: 'CSS样式', target: 'JavaScript编程', type: 'prerequisite', strength: 'strong' },
  { id: 3, source: 'JavaScript编程', target: 'React框架', type: 'prerequisite', strength: 'medium' },
  { id: 4, source: 'JavaScript编程', target: 'Vue.js框架', type: 'prerequisite', strength: 'medium' },
  { id: 5, source: 'React框架', target: 'Vue.js框架', type: 'related', strength: 'weak' }
])

// 学习路径数据
const learningPaths = ref([
  {
    id: 1,
    name: '前端开发完整路径',
    category: 'frontend',
    type: 'system',
    difficulty: 'beginner',
    nodeCount: 8,
    estimatedTime: '4-6个月',
    learners: 189,
    completion: 78,
    rating: 4.8,
    trending: true,
    nodes: ['HTML结构', 'CSS样式', 'JavaScript编程', 'React框架']
  },
  {
    id: 2,
    name: '现代前端框架精通',
    category: 'frontend',
    type: 'template',
    difficulty: 'advanced',
    nodeCount: 12,
    estimatedTime: '6-8个月',
    learners: 67,
    completion: 85,
    rating: 4.9,
    trending: false,
    nodes: ['JavaScript编程', 'React框架', 'Vue.js框架', 'TypeScript']
  },
  {
    id: 3,
    name: '全栈开发进阶',
    category: 'full-stack',
    type: 'custom',
    difficulty: 'intermediate',
    nodeCount: 15,
    estimatedTime: '8-12个月',
    learners: 134,
    completion: 65,
    rating: 4.6,
    trending: true,
    nodes: ['React框架', 'Node.js', '数据库设计', 'API开发']
  }
])

// 计算属性
const modalTitle = computed(() => {
  const titles = {
    node: '新增知识点',
    relation: '新增关系',
    path: '创建学习路径'
  }
  return titles[modalType.value]
})

const allNodes = computed(() => {
  return knowledgeNodes.value
})

const filteredNodes = computed(() => {
  let nodes = knowledgeNodes.value
  
  // 搜索过滤
  if (searchTerm.value) {
    const searchLower = searchTerm.value.toLowerCase()
    nodes = nodes.filter(node => 
      node.name.toLowerCase().includes(searchLower) ||
      (node.description && node.description.toLowerCase().includes(searchLower)) ||
      node.type.toLowerCase().includes(searchLower)
    )
  }
  
  // 分类过滤
  if (selectedCategory.value !== 'all') {
    nodes = nodes.filter(node => node.category === selectedCategory.value)
  }
  
  // 难度过滤
  if (selectedDifficulty.value !== 'all') {
    nodes = nodes.filter(node => node.difficulty === parseInt(selectedDifficulty.value))
  }
  
  return nodes
})

// 方法
const getDifficultyColor = (difficulty) => {
  const colors = {
    1: '#43e97b',
    2: '#4facfe', 
    3: '#fa709a',
    4: '#ff9a9e',
    5: '#ff5858'
  }
  return colors[difficulty] || '#667eea'
}

const getDifficultyGradient = (difficulty) => {
  const gradients = {
    1: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    2: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    3: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    4: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    5: 'linear-gradient(135deg, #ff5858 0%, #f09819 100%)'
  }
  return gradients[difficulty] || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
}

const getTypeIcon = (type) => {
  const icons = {
    foundation: '🏗️',
    framework: '📦',
    concept: '💡',
    tool: '🔧'
  }
  return icons[type] || '📚'
}

const getTypeLabel = (type) => {
  const labels = {
    foundation: '基础知识',
    framework: '框架',
    concept: '概念',
    tool: '工具'
  }
  return labels[type] || '未知类型'
}

const getTagType = (type) => {
  const types = {
    foundation: 'success',
    framework: 'primary',
    concept: 'warning',
    tool: 'info'
  }
  return types[type] || 'info'
}

const getRelationLabel = (type) => {
  const labels = {
    prerequisite: '前置条件',
    related: '相关知识',
    extends: '扩展知识'
  }
  return labels[type] || '未知关系'
}

const getStrengthLabel = (strength) => {
  return strength === 'strong' ? '强' :
         strength === 'medium' ? '中' : '弱'
}

const getDifficultyLabel = (difficulty) => {
  const labels = {
    beginner: '🌱 初级',
    intermediate: '🌿 中级',
    advanced: '🌳 高级'
  }
  return labels[difficulty] || '未知难度'
}

const getDifficultyTagType = (difficulty) => {
  const types = {
    beginner: 'success',
    intermediate: 'warning',
    advanced: 'danger'
  }
  return types[difficulty] || 'info'
}

const getPathTypeLabel = (type) => {
  const labels = {
    system: '系统路径',
    template: '模板路径',
    custom: '自定义'
  }
  return labels[type] || '未知类型'
}

const getPathTypeTagType = (type) => {
  const types = {
    system: 'primary',
    template: '',
    custom: 'info'
  }
  return types[type] || 'info'
}

const getPathProgressColor = (completion) => {
  if (completion >= 80) return '#67c23a'
  if (completion >= 60) return '#e6a23c'
  return '#f56c6c'
}

const formatDate = (date) => {
  if (!date) return '未知时间'
  return new Date(date).toLocaleDateString('zh-CN')
}

// 事件处理
const selectCategory = (categoryKey) => {
  selectedCategory.value = categoryKey
  ElMessage.success(`已选择分类: ${categoryKey}`)
}

const openModal = (type) => {
  modalType.value = type
  showAddModal.value = true
  
  // 重置表单
  if (type === 'node') {
    nodeForm.value = { name: '', key: '', type: '', difficulty: 1, category: '', description: '' }
  } else if (type === 'relation') {
    relationForm.value = { source: '', target: '', type: '', strength: 3, label: '' }
  } else if (type === 'path') {
    pathForm.value = { name: '', estimatedTime: '', category: '', difficulty: '', description: '', nodes: [] }
  }
}

const saveModal = () => {
  if (modalType.value === 'node') {
    // 保存节点逻辑
    ElMessage.success('知识点创建成功')
  } else if (modalType.value === 'relation') {
    // 保存关系逻辑
    ElMessage.success('关系创建成功')
  } else if (modalType.value === 'path') {
    // 保存路径逻辑
    ElMessage.success('学习路径创建成功')
  }
  showAddModal.value = false
}

const editNode = (node) => {
  ElMessage.info(`编辑节点: ${node.name}`)
}

const shareNode = (node) => {
  ElMessage.success('分享链接已复制到剪贴板')
}

const deleteNode = (node) => {
  ElMessageBox.confirm(
    `确定要删除 "${node.name}" 知识点吗？此操作不可恢复。`,
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('知识点删除成功')
  }).catch(() => {
    // 取消删除
  })
}

const editRelation = (relation) => {
  ElMessage.info(`编辑关系: ${relation.source} → ${relation.target}`)
}

const deleteRelation = (relation) => {
  ElMessageBox.confirm(
    '确定要删除这个关系吗？',
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('关系删除成功')
  })
}

const editPath = (path) => {
  ElMessage.info(`编辑路径: ${path.name}`)
}

const deletePath = (path) => {
  ElMessageBox.confirm(
    `确定要删除 "${path.name}" 学习路径吗？`,
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('学习路径删除成功')
  })
}

const togglePathExpansion = (pathId) => {
  const newExpanded = new Set(expandedPaths.value)
  if (newExpanded.has(pathId)) {
    newExpanded.delete(pathId)
  } else {
    newExpanded.add(pathId)
  }
  expandedPaths.value = newExpanded
}

const removeNodeFromPath = (index) => {
  pathForm.value.nodes.splice(index, 1)
}
</script>

<style scoped>
/* 基础样式 */
.knowledge-admin-container {
  min-height: 100vh;
  background:  #f8fafc;
}

/* 顶部导航 */
.top-navigation {
  background: #9f8eaf;
  border-bottom: 1px solid #ccb2c8;
  
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-icon {
  padding: 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

.nav-text h1 {
   font-size: 20px;
  font-weight: 600;
  color: white;
  margin: 0 0 2px 0;
}

.nav-text p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 14px;
}

.admin-tag {
  font-weight: 500;
  font-size: 12px;
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.nav-right {
  display: flex;
  gap: 12px;
}

.nav-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  background: rgba(148, 163, 184, 0.2);
  color: white;
}

/* 主要内容 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px;
}

/* 标签页导航 */
.tab-navigation {
  margin-bottom: 24px;
}

.tab-container {
 background: white;
  border-radius: 8px;
  padding: 4px;
  border: 1px solid #e2e8f0;
}

.tab-wrapper {
  display: flex;
  gap: 4px;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #64748b;
  font-weight: 500;
  font-size: 14px;
  flex: 1;
  justify-content: center;
}

.tab-item:hover {
  color: #475569;
  background: #f1f5f9;
}

.tab-item.active {
  background: #9f8eaf;
  color: white;
}

.tab-icon {
  width: 20px;
  height: 20px;
}

/* 欢迎横幅 */
.welcome-banner {
  background: linear-gradient(135deg, #B5ACC9 0%, #B5ACC9 100%);
  border-radius: 24px;
  padding: 32px;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
}

.banner-decoration {
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0.2;
}

.banner-content {
  position: relative;
  z-index: 10;
}

.banner-content h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.banner-content p {
  font-size: 16px;
  opacity: 0.9;
}

.highlight {
  font-weight: bold;
  color: #fbbf24;
}

/* 统计卡片 */
.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 24px;
}

.stat-icon {
  padding: 12px;
  border-radius: 16px;
  color: white;
  margin-right: 16px;
  transition: transform 0.3s ease;
}

.stat-card-0 { background: linear-gradient(135deg, #82a4c2 0%, #82a4c2 100%); }
.stat-card-1 { background: linear-gradient(135deg, #a3a88f 0%, #a3a88f 100%); }
.stat-card-2 { background: linear-gradient(135deg, #e9d3e0 0%, #e8cadb 100%); }
.stat-card-3 { background: linear-gradient(135deg, #f2eeca 0%, #FEF9C2 100%); }


.stat-card-0 .stat-icon { background: #d3e1ef; }
.stat-card-1 .stat-icon { background: #d3e1ef; }
.stat-card-2 .stat-icon { background: #72d8b6; }
.stat-card-3 .stat-icon { background: #72d8b6; }

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 16px;
  font-weight: 600;
  color: #6a7da1;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #d3e1ef;
}

.stat-change {
  font-size: 14px;
  font-weight: 600;
}


/* 技术概览 */
.tech-overview {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 24px;
}

.tech-overview :deep(.el-card__header) {
  border-bottom: 1px solid #f1f5f9;
  padding: 20px 24px;
}

.card-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 2px 0;
}

.card-header p {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px;
}

.tech-header {
  display: flex;
  align-items: center;
   justify-content: space-between;
}

.tech-card {
  border-radius: 20px;
  padding: 24px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tech-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  border-color: #cbd5e1;
}

.tech-icon {
  font-size: 36px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
}

.tech-info h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #1e293b;

}

.tech-info p {
font-size: 13px;
  color: #64748b;
  margin: 0;
}

.tech-progress {
  margin-top: 20px;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  opacity: 0.9;
  color: #64748b;
}

.growth-tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  margin-top: 16px;
  display: inline-block;
  font-weight: 500;
}

/* 活动概览 */
.activity-overview {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  margin-bottom: 32px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.activity-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateX(4px);
}

.activity-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.activity-icon-0 { background: #769edd; }
.activity-icon-1 { background: #10b981; }
.activity-icon-2 { background: #8b5cf6; }
.activity-icon-3 { background: #f59e0b; }

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 14px;
}

.activity-arrow {
  color: #6b7280;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.activity-item:hover .activity-arrow {
  opacity: 1;
}

/* 知识点管理 */
.nodes-container {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.nodes-operations {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
}

.search-input {
  width: 300px;
}

.filter-select {
  min-width: 150px;
}

.add-btn {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  border: none;
  border-radius: 16px;
  padding: 12px 24px;
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

/* 节点网格 */
.nodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.node-card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.node-card:hover,
.node-card-hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #8b5cf6;
}

.node-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.node-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.node-card:hover .node-icon {
  transform: scale(1.1);
}

.node-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.node-card:hover .node-actions {
  opacity: 1;
}

.node-info {
  flex: 1;
  margin-bottom: 16px;
}

.node-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #111827;
  line-height: 1.4;
}

.node-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.node-description {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.node-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.node-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

.node-progress {
  margin-top: auto;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: #6b7280;
}

.node-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

.node-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #9ca3af;
}

/* 分页 */
.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* 关系管理 */
.relations-container {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.add-relation-btn {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  border: none;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.add-relation-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.relations-grid {
  display: grid;
  gap: 20px;
}

.relation-card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.relation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.relation-content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.relation-node {
  padding: 16px;
  border-radius: 12px;
  color: white;
  min-width: 120px;
  text-align: center;
}

.source-node {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.target-node {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.node-name {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.node-type {
  font-size: 12px;
  opacity: 0.8;
}

.relation-connection {
  flex: 1;
  position: relative;
  height: 4px;
  display: flex;
  align-items: center;
}

.connection-line {
  height: 4px;
  flex: 1;
  border-radius: 2px;
}

.connection-prerequisite { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }
.connection-related { background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); }
.connection-extends { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }

.relation-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  text-align: center;
  min-width: 100px;
}

.label-prerequisite { color: #3b82f6; }
.label-related { color: #10b981; }
.label-extends { color: #f59e0b; }

.strength-text {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.connection-arrow {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  transform: translateY(-50%) rotate(45deg);
}

.arrow-prerequisite { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }
.arrow-related { background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); }
.arrow-extends { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }

.relation-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.relation-card:hover .relation-actions {
  opacity: 1;
}

/* 学习路径 */
.paths-container {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.paths-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.path-card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.path-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.path-content {
  padding: 24px;
}

.path-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.path-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.path-info {
  flex: 1;
}

.path-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.path-title {
  font-size: 18px;
  font-weight: bold;
  color: #111827;
  margin: 0;
}

.trending-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
}

.path-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f59e0b;
  font-weight: 600;
}

.path-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.path-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.path-card:hover .path-actions {
  opacity: 1;
}

.path-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 12px;
  font-size: 14px;
  color: #6b7280;
}

.path-progress {
  margin-bottom: 20px;
}

.path-nodes {
  padding: 20px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border-radius: 16px;
  border: 1px solid #e5e7eb;
}

.nodes-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #111827;
  margin-bottom: 16px;
}

.nodes-sequence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.sequence-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sequence-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.sequence-node:hover {
  border-color: #8b5cf6;
  transform: translateY(-2px);
}

.node-number {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 12px;
}

.sequence-arrow {
  color: #8b5cf6;
}

/* 模态框 */
.custom-dialog {
  border-radius: 24px;
}

.modal-content {
  padding: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.node-form .form-row:first-child {
  grid-template-columns: 1fr 1fr;
}

.node-form .form-row:nth-child(2) {
  grid-template-columns: 1fr 1fr 1fr;
}

.relation-types {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.relation-option {
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.relation-option:hover {
  border-color: #8b5cf6;
  background: #f8fafc;
}

.option-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.option-icon {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.option-icon.prerequisite { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }
.option-icon.related { background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); }
.option-icon.extends { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }

.path-builder {
  border: 2px dashed #d1d5db;
  border-radius: 16px;
  padding: 20px;
  background: #f9fafb;
}

.builder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  margin-bottom: 16px;
  text-align: center;
  justify-content: center;
}

.node-sequence {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.sequence-node-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.node-index {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 12px;
}

.node-icon {
  font-size: 18px;
}

.node-name {
  flex: 1;
  font-weight: 500;
}

.add-node-btn {
  width: 100%;
  padding: 12px;
  border: 2px dashed #9ca3af;
  border-radius: 12px;
  background: transparent;
  color: #6b7280;
  transition: all 0.3s ease;
}

.add-node-btn:hover {
  border-color: #8b5cf6;
  color: #8b5cf6;
  background: #f8fafc;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* 浮动操作按钮 */
.floating-actions {
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1000;
}

.float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  .nav-content {
    padding: 16px;
    flex-direction: column;
    gap: 16px;
  }

  .tab-wrapper {
    flex-direction: column;
  }

  .nodes-operations {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input,
  .filter-select {
    width: 100%;
  }

  .nodes-grid {
    grid-template-columns: 1fr;
  }

  .tech-grid {
    grid-template-columns: 1fr;
  }

  .relation-content {
    flex-direction: column;
    text-align: center;
  }

  .path-header {
    flex-direction: column;
    text-align: center;
  }

  .path-stats {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .floating-actions {
    bottom: 16px;
    right: 16px;
  }
}
 </style>



















